<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天气案例-深度监视</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>今天天气很{{wetherInfo}}</h1>
			<button type="button" @click="changeWether">切换天气</button>
			<hr />
			<h1>a的值{{numbers.a}}</h1>
			<button @click="numbers.a++">点我让a+1</button>
		</div>

	<!--
	深度监视:
		 (1).Vue中的watch默认不监测对象内部值的改变(一层).
		 (2).配置deep:true可以监测对象内部值改变(多层)。
		 备注:
		 (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
			通过控制台，修改vm实例内部的变量值，可以看到页面使用该变量发生改变。
		 (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
	-->
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#root',
			data: {
				isHot: false,
				numbers: {
					a: 1,
					b: 2
				}
			},
			methods: {
				changeWether() {
					//this.wether = this.isHot ? '凉爽' : '炎热'
					this.isHot = !this.isHot
				}
			},
			computed: {
				wetherInfo() {
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			watch: {
				//监视多级结构中某个属性的变化
				'numbers.a':{
					handler(newValue,oldValue){
						console.log('aaaa',newValue,oldValue)
					}
				},
				//这是监视numbers,不是监视numbers里面的a,b
				//监视多级结构中所有属性的变化。
				'numbers':{
					deep:true,
					handler(newValue,oldValue){
						console.log('aaaa',newValue,oldValue)
					}
				}
			}
		})
	</script>
</html>